<template>
  <div class="home">
    <!-- <Tabtop></Tabtop> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in TopList"
        :key="index"
        class="imgs"
      >
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-row type="flex" justify="space-around">
      <van-col span="8">
        <router-link to="/information">
          <div class="picture picture_1"></div>
          <p>新闻资讯</p>
        </router-link>
      </van-col>
      <van-col span="8">
        <router-link to="/picture">
          <div class="picture picture_2"></div>
          <p>图片分享</p></router-link
        ></van-col
      >
      <van-col span="8">
        <router-link to="/goods">
          <div class="picture picture_3"></div>
          <p>商品展示</p></router-link
        ></van-col
      >
      <van-col span="8">
        <router-link to="/4"
          ><div class="picture picture_4"></div>
          <p>留言反馈</p></router-link
        ></van-col
      >
      <van-col span="8">
        <router-link to="/5"
          ><div class="picture picture_5"></div>
          <p>搜索资讯</p></router-link
        ></van-col
      >
      <van-col span="8">
        <router-link to="/6">
          <div class="picture picture_6"></div>
          <p>联系我们</p></router-link
        ></van-col
      >
    </van-row>
    <!-- <Tabbar></Tabbar> -->
  </div>
</template>

<script>
// import Tabtop from "../components/Tabtop.vue";
// import Tabbar from "../components/Tabbar.vue";
import { getLunbo } from "../apis/user";
export default {
  data() {
    return {
      TopList: [],
    };
  },

  async created() {
    const res = await getLunbo();
    // console.log(res);
    this.TopList = res.data.message;
    // console.log(this.TopList);
  },
  // components: {
  //   Tabtop,
  //   Tabbar,
  // },
};
</script>

<style lang="less" scoped>
.van-swipe {
  margin-top: 5px;
  width: 375px;
  height: 200px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    /* background-color: #39a9ed; */
  }
  .van-swipe-item img {
    width: 100%;
    height: 250px;
  }
}
.van-row {
  height: 242px;
}
.van-col {
  text-align: center;
  padding-top: 20px;
  p {
    // padding-bottom: 15px;
    margin-top: 15px;
    color: #000;
  }
}
.picture {
  width: 50px;
  height: 50px;
  // background: brown;
  margin: 0 auto;
}
.picture_1 {
  background-image: url("../images/menu3.png");
  background-repeat: round;
}
.picture_2 {
  background-image: url("../images/menu4.png");
  background-repeat: round;
}
.picture_3 {
  background-image: url("../images/menu5.png");
  background-repeat: round;
}
.picture_4 {
  background-image: url("../images/menu6.png");
  background-repeat: round;
}
.picture_5 {
  background-image: url("../images/menu9.png");
  background-repeat: round;
}
.picture_6 {
  background-image: url("../images/menu10.png");
  background-repeat: round;
}
</style>